<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>停车场</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            margin: 5px;
            list-style: none;
            width: 30px;
            height: 50px;
            border-radius: 12px;
            background-color: #2f1919;
            cursor: pointer;
        }

        .b1b {
            float: left;
            position: relative;
            width: 870px;
            height: 790px;
            background-color: #bbb;
        }

        .b1b1 {
            position: absolute;
            float: left;
            top: 10px;
            left: 16px;
            width: 842px;
            height: 60px;
            border-radius: 6px;
            border-top: 4px solid rgb(173, 14, 14);
            background-color: #eee;
        }

        .b1b2 {
            position: absolute;
            top: 295px;
            left: -160px;
            width: 400px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b3 {
            position: absolute;
            top: 295px;
            left: -30px;
            width: 400px;
            height: 60px;
            border-radius: 6px;
            border-top: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b4 {
            position: absolute;
            top: 315px;
            left: 30px;
            width: 440px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b5 {
            float: left;
            position: absolute;
            top: 315px;
            left: 165px;
            width: 440px;
            height: 60px;
            border-radius: 6px;
            border-top: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b6 {
            position: absolute;
            top: 335px;
            left: 225px;
            width: 480px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b7 {
            position: absolute;
            top: 335px;
            left: 365px;
            width: 480px;
            height: 60px;
            border-radius: 6px;
            border-top: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b8 {
            position: absolute;
            top: 335px;
            left: 442px;
            width: 480px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b9 {
            position: absolute;
            top: 335px;
            left: 590px;
            width: 480px;
            height: 60px;
            border-radius: 6px;
            border-top: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(90deg);
        }

        .b1b10 {
            position: absolute;
            top: 640px;
            left: 0px;
            width: 480px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(18deg);
            z-index: 2;
        }
        .buding {
            position: absolute;
            top: 713.2px;
            left: 458px;
            width: 30px;
            height: 60px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            transform: rotate(8deg);
            z-index: 0;
        }

        .b1b11 {
            position: absolute;
            top: 715px;
            left: 480px;
            width: 200px;
            height: 60px;
            border-radius: 6px;
            border-bottom: 4px solid rgb(173, 14, 14);
            background-color: #eee;
            z-index: 2;
        }

        .baoan {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 80px;
            height: 140px;
            border-radius: 12px;
            font-size: 24px;
            line-height: 130px;
            text-align: center;
            color: #fff;
            background-color: blue;
        }

        .rukou {
            position: absolute;
            right: 115px;
            bottom: 10px;
            width: 50px;
            height: 80px;
            border-radius: 6px;
            font-size: 24px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            background-color: rgb(15, 189, 44);
        }

        .sanjiao {
            position: absolute;
            right: 100px;
            bottom: 80px;
            width: 0;
            height: 0;
            border: 40px solid transparent;
            border-bottom-color: rgb(15, 189, 44);
            font-size: 24px;
            line-height: 80px;
            text-align: center;
        }

        .x1x {
            position: absolute;
            top: 700px;
            left: -120px;
            width: 600px;
            height: 145px;
            background-color: #fff;
            transform: rotate(18deg);
        }

        .b2b {
            overflow: hidden;
            float: left;
            margin-left: 12px;
            width: 100px;
            height: 600px;
            /* background-color: #bbb; */
        }

        .b2b1 {
            overflow: hidden;
            width: 100px;
            height: 80px;
            border-radius: 6px;
        }

        .b2b1b1 {
            width: 100px;
            height: 40px;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #2f1919;

        }

        .b2b1b2 {
            width: 100px;
            height: 40px;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #b11a1a;
        }

        .b2b2 {
            margin-top: 18px;
            overflow: hidden;
            width: 100px;
            height: 80px;
            border-radius: 6px;
        }

        .b2b2b1 {
            width: 100px;
            height: 40px;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #035c12;

        }

        .b2b2b2 {
            width: 100px;
            height: 40px;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #17e25b;
        }
        .b3b {
            float: left;
        }
        .b3b1 {
            margin-left: 40px;
            width: 60px;
            height: 434px;
            border-radius: 12px;
            border: 4px solid rgb(155, 206, 221);
            font-size: 36px;
            line-height: 54px;
            text-align: center;
            font-weight: 700;
            color: rgb(197, 20, 20);
            background-color: rgb(187, 245, 242);
            box-shadow: 0 3px 5px #aaa;
            cursor: pointer;
            transition: all 1s;
        }
        .b3b1:active {
            transform: translateY(12px);
        }

        .li_g {
            background-color: #17e25b;
        }

        .zhan {
            margin-top: 36px;
            width: 100px;
            height: 40px;
            border-radius: 12px;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #691313;
            cursor: pointer;
        }
        .zhan:active{
            background-color: #a11c1c;
        }
        .shen {
            margin-top: 18px;
            width: 100px;
            height: 40px;
            border-radius: 12px;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            background-color: #05881b;
            cursor: pointer;
        }
        .shen:active {
            background-color: #07c527;
        }
    </style>
</head>

<body>
    <div class="b1b">
        <div class="b1b1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b3">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b4">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b5">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b6">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b7">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b8">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b9">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b1b10">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="buding"></div>
        <div class="b1b11">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="baoan">保安室</div>
        <div class="rukou">入口</div>
        <div class="sanjiao"></div>
        <div class="x1x"></div>
    </div>
    <div class="b2b">
        <div class="b2b1">
            <div class="b2b1b1">已停占</div>
            <div class="b2b1b2"></div>
        </div>
        <div class="b2b2">
            <div class="b2b2b1">可用位</div>
            <div class="b2b2b2"></div>
        </div>
        <div class="zhan">全部占用</div>
        <div class="shen">全部空位</div>
    </div>
    <div class="b3b">
        <div class="b3b1">空<br>中<br>楼<br>阁<br>·<br>停<br>车<br>场<br></div>
    </div>

    <script>
        var all = document.querySelectorAll("li")
        var zhan = document.querySelector(".b2b1b2")
        var shen = document.querySelector(".b2b2b2")
        var zhan_all = document.querySelector(".zhan")
        var shen_all = document.querySelector(".shen")
        var flag = []
        var zong_num = 0
        var shen_num = 0
        var zhan_num = 0
        for (let i = 0; i < all.length; i++) {
            zong_num += 1
            zhan_num += 1
            flag[i] = 1
            all[i].onclick = function () {
                if (flag[i] === 1) {
                    this.className = "li_g"
                    flag[i] = 0
                    zhan_num -= 1
                    shen_num += 1
                }
                else {
                    this.className = ""
                    flag[i] = 1
                    zhan_num += 1
                    shen_num -= 1
                }
                zhan.innerText = zhan_num
                shen.innerText = shen_num
                console.log(zong_num)
                console.log(zhan_num)
                console.log(shen_num)
            }
        }
        zhan_all.addEventListener("click",function(){
            for(let i = 0; i<all.length;i++){
                flag[i] = 1
                all[i].className = ""
            }
            zhan_num = zong_num
            shen_num = zong_num - zhan_num
            zhan.innerText = zhan_num
            shen.innerText = shen_num
        })
        shen_all.addEventListener("click",function(){
            for(let i = 0; i<all.length;i++){
                flag[i] = 0
                all[i].className = "li_g"
            }
            shen_num = zong_num
            zhan_num = zong_num - shen_num
            zhan.innerText = zhan_num
            shen.innerText = shen_num
        })
        zhan.innerText = zhan_num
        shen.innerText = shen_num
    </script>
</body>

</html>